<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='../../3-javascript/day14/jquery.js'></script>
    <style>
        .main {
            width:80%;
            margin:0 auto;
        }
        ul {
            padding:0;
        }
        ul li {
            width:20%;
            height:32px;
            list-style: none;
            border: 1px solid #ccc;
            margin-bottom: .5em;
            line-height: 32px;
            border-radius: 3px;
            padding:0 5px;
        }
    </style>
</head>
<body>
    <div class="main">
        <input id="text" type="text"><input type="button" value="添加" onclick='addItem()'>
        <ul id='ul' onclick='removeItem(event)'>
            
        </ul>
    </div>
</body>
<script>
    var input = document.getElementById('text');
    var ul = document.getElementById('ul');
    var data = JSON.parse(localStorage.getItem('item')) || [];

    data.forEach(function(item) {
        console.log(item);
        var newLi = document.createElement('li');
        newLi.innerText = item;
        ul.appendChild(newLi);
        data.push(input.value)
    })
    //添加事项
        function addItem() {
            var newLi = document.createElement('li');
            newLi.innerText = input.value;
            ul.appendChild(newLi);
            data.push(input.value)
            localStorage.setItem('item', JSON.stringify(data));
        }
    //删除事项
        function removeItem(event){
            if(event.target.tagName === "LI"){
                event.target.remove()
            }
            data.forEach(function(item,index){
                if(item === event.target.innerText){
                    data.splice(index, 1)
                }
            })
            console.log(data);
            // localStorage.setItem('item', JSON.stringify(data));
        }
</script>
</html>